<div id="main-content">
    <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
    <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
    <div class="container">
        <div class="row">
            <div id="content" class="col-lg-12">
                <!-- PAGE HEADER-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <!-- STYLER -->

                            <!-- /STYLER -->
                            <!-- BREADCRUMBS -->
                            <ul class="breadcrumb">
                                <li>
                                    <i class="fa fa-home"></i>
                                    <a href="index.html">首页</a>
                                </li>
                                <li>好友管理</li>
                            </ul>
                            <!-- /BREADCRUMBS -->
                            <div class="clearfix">
                                <h3 class="content-title pull-left">好友管理</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /PAGE HEADER -->
                <!-- CALENDAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- BOX -->
                        <div class="box border">
                            <div class="box-title">
                                <h4><i class="fa fa-user"></i>好友管理</h4>
                                <div class="tools">
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="box-border"></div>
                                        <div class="box-title">
                                            <div class="input-group" style="text-align:center">
                                                &nbsp;&nbsp;&nbsp;<input ng-model="myFriendName" placeholder="输入好友Z账号以进行检索"/>&nbsp;&nbsp;<i class="fa fa-search"></i>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <div class="box border">
                                                <div class="box-title">
                                                    <h4><i class="fa fa-bars"></i>添加好友</h4>
                                                    <div class="tools hidden-xs">
                                                    </div>
                                                </div>
                                                <div class="box-body big">
                                                    <h3 class="form-title">填写好友信息</h3>
                                                    <label for="inputZid">好友Z账号</label>
                                                    <input type="text" ng-model="applyFriendTiming" class="form-control" placeholder="输入Z账号" id="inputZid"/>
                                                    <br/>
                                                    <button class="btn btn-success" ng-click="ApplyFriend()">确认添加好友</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="box-border"></div>
                                        <div class="box-body">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>Z账号</th>
                                                    <th>约权限</th>
                                                    <th>看权限</th>
                                                    <th>管权限</th>
                                                    <th>权限编辑</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="item in myFriend|filter:{friendTiming:myFriendName}">
                                                    <td ng-bind="$index+1"></td>
                                                    <td ng-bind="item.friendTiming"></td>
                                                    <td>{{permissionDisplay(item.invitePermission)}}</td>
                                                    <td>{{permissionDisplay(item.viewPermission)}}</td>
                                                    <td>{{permissionDisplay(item.editPermission)}}</td>
                                                    <td>
                                                        <select ng-model="changeFriendPermission" ng-init="changeFriendPermission=item.editPermission?'edit':item.viewPermission?'view':'invite'">
                                                            <option value="invite">约权限</option>
                                                            <option value="view">看权限</option>
                                                            <option value="edit">管权限</option>
                                                        </select>&nbsp;
                                                        <button class="btn btn-success" ng-click="editFriendPermission(item.id,changeFriendPermission)">修改权限</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <button class="btn btn-danger" ng-click="deleteFriendPermission(item.id)">删除好友</button>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /BOX -->
                    </div>
                </div>
                <!-- /CALENDAR -->
                <div class="footer-tools">
                    <a class="go-top">
                        <i class="fa fa-chevron-up"></i> Top
                    </a>
                </div>
            </div><!-- /CONTENT-->
        </div>
    </div>
</div>